<template>
  <el-dialog :visible.sync="dialogFormVisible" :lock-scroll="false" :close-on-click-modal="false" title="删除部门用户" top="30px" width="1100px" @close="closeDialog()">
    <el-table ref="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row @select="choiceData" @select-all="selectAll">
      <el-table-column prop="username" label="用户名" align="center" />
      <el-table-column prop="realName" label="真实姓名" align="center" />
      <el-table-column type="selection" width="80" align="center" />
    </el-table>
    <el-row class="pagination-container">
      <el-pagination :current-page="currentPage" :total="listCount" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
/* eslint-disable */
import { pagination } from '@/mixins/index'
export default {
  mixins: [pagination],
  data () {
    return {
      list: null,
      listCount: 1,
      listLoading: false,
      dialogFormVisible: false,
      dataList: [],
      departId: ''
    }
  },
  methods: {
    getData () {
      this.listLoading = true
      this.$http.request({
        url: `/department/user/${this.departId}/1/10`,

        tokenRefresh: () => this.getData()
      }).then(res => {
        const { list, total } = res.data
        this.list = list
        this.dataList = list
        this.$nextTick(() => {
          this.dataList.forEach(l => {
            this.$refs.table.toggleRowSelection(l)
          })
        })
        this.listCount = total
        this.listLoading = false
      })
    },
    choiceData (checkedList, row) {
      this.listLoading = true
      const data = { departId: this.departId, userId: row.uid }
      this.$http.request({
        method: 'delete',
        url: `/department/user`,

        data: data
      }).then(() => {
        this.$message.success('删除成功')
        this.getData()
      })
    },
    selectAll (checkedList) {
      checkedList.forEach(c => {
        this.choiceData(checkedList, c)
      })
    },
    closeDialog () {
      this.dataList = []
    }
  }
}
</script>
<style lang='scss' scoped>
  .dialog-footer {
    margin-top: 20px;
  }
</style>
